import { Flex } from 'antd';
import styles from './styles.module.scss';
export const LiItem = ({
  children,
  onClick,
  disabled,
  hasBg,
  active,
}: {
  children: React.ReactNode;
  onClick?: () => void;
  active?: boolean;
  disabled?: boolean;
  hasChildren?: boolean;
  hasBg?: boolean;
}) => {
  return (
    <Flex
      style={{
        cursor: !disabled ? 'pointer' : 'default',
        opacity: disabled && 0.4,
      }}
      className={`
        ${styles.listItem} 
        ${!disabled ? styles.hover : ''} 
        ${hasBg ? 'border bg-[#f1f3f5]' : ''}
        ${active ? styles.active : ''}
      `}
      onClick={() => !disabled && onClick?.()}>
      {children}
    </Flex>
  );
};
